{% extends "base.html" %}

{% load static %}

{% block content %}
    <div class="row">
        <div class="col-lg">
            <div class="card">
                <div class="card-body">
                    <div class="row mb-3">
                        <div class="col">
                          客户ID：{{ khxq.id }}  -   客户：{{ khxq.username }}
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-3">
                            <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist"
                                 aria-orientation="vertical">
                                <a class="nav-link active show" id="v-pills-home-tab" data-toggle="pill"
                                   href="#v-pills-home"
                                   role="tab" aria-controls="v-pills-home" aria-selected="true">个人信息</a>
                                <a class="nav-link" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile"
                                   role="tab" aria-controls="v-pills-profile" aria-selected="false">客户订单</a>
                                <a class="nav-link" id="v-pills-messages-tab" data-toggle="pill"
                                   href="#v-pills-messages" role="tab" aria-controls="v-pills-messages"
                                   aria-selected="false">进班情况</a>
                                <a class="nav-link" id="v-pills-settings-tab" data-toggle="pill"
                                   href="#v-pills-settings" role="tab" aria-controls="v-pills-settings"
                                   aria-selected="false">跟进记录</a>
                                <a class="nav-link" id="v-pills-xiangqing-tab" data-toggle="pill"
                                   href="#v-pills-xiangqing" role="tab" aria-controls="v-pills-xiangqing"
                                   aria-selected="false">客户资料</a>


                            </div>
                        </div>
                        <div class="col-9">
                            <div class="tab-content" id="v-pills-tabContent">
                                <div class="tab-pane fade active show" id="v-pills-home" role="tabpanel"
                                     aria-labelledby="v-pills-home-tab">{#客户基本信息展示  #}
                                    <div class="container">
                                        <div class="row">
                                            <table class="table ">
                                                <tr>
                                                    <td>姓名</td>
                                                    <td>{{ khxq.username }}</td>
                                                    <td>联系人</td>
                                                    <td>{{ khxq.name }}</td>
                                                    <td>联系电话</td>
                                                    <td>{{ khxq.tel }}</td>
                                                    <td>咨询时间</td>
                                                    <td>{{ khxq.zixuntime }}</td>
                                                </tr>
                                                <tr>
                                                 {% include "kehu_zhuangtai.html" %}
                                                </tr>
                                                <tr>

                                                    <td>录入时间</td>
                                                    <td>{{ khxq.addtime }}</td>
                                                    <td>当前归属人</td>
                                                    <td>{{ khxq.admin_user.first_name }}{{ khxq.admin_user.last_name }}</td>
                                                    <td></td>
                                                    <td></td>
                                                    <td></td>
                                                    <td></td>

                                                </tr>
                                                <tr>
      <td colspan="8" width="576">备注:{{ khxq.beizhu }}</td>
    </tr>
                                            </table>
                                        </div>
                                        <div class="row">
                                            <button type="button" class="btn btn-primary">
                                                更新客户资料
                                            </button>
                                        </div>
                                    </div>
                                </div>
                                <div class="tab-pane fade" id="v-pills-profile">{#客户订单信息#}
                                    <div class="row mb-2">
                                        <button type="button" class="btn btn-primary" data-toggle="modal"
                                                data-target="#staticBackdrop">新增订单
                                        </button>
                                    </div>
                                    <div class="modal fade" id="staticBackdrop" data-backdrop="static"
                                         data-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel"
                                         aria-hidden="true">
                                        <div class="modal-dialog">
                                            <div class="modal-content">
                                                <div class="modal-header">
                                                    <h5 class="modal-title" id="staticBackdropLabel">{{ khxq.username }}/{{ khxq.name }}
                                                        | 新增订单</h5>
                                                </div>
                                                <form method="post" action="{% url 'Kehu_detail' pk=object.id %}">
                                                    {% csrf_token %}
                                                    <div class="modal-body">
                                                        {% for kehudingdan in KeHuDingdan_Form %}
                                                            <div class="form-group">
                                                                <label for="recipient-name"
                                                                       class="col-form-label">{{ kehudingdan.label_tag }}</label>
                                                                {{ kehudingdan }}
                                                            </div>


                                                        {% endfor %}
                                                        {% for error in kehudingdan.errors %}
                                                            <p class="text-danger">{{ error }}</p>
                                                        {% endfor %}
                                                    </div>

                                                    <div class="modal-footer">
                                                        <button type="button" class="btn btn-secondary"
                                                                data-dismiss="modal">取消
                                                        </button>
                                                        <button type="submit" name="form_key" value="dingdan">保存
                                                        </button>
                                                    </div>
                                                </form>

                                            </div>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <table class="table table-bordered table-hover">
                                            <thead>
                                            <tr>
                                                <td>序号</td>
                                                <td>订单号</td>
                                                <td>客户姓名</td>
                                                <td>订单时间</td>
                                                <td>订单归属</td>
                                                <td>操作</td>
                                            </tr>
                                            </thead>
                                            {% for dingdan in kehudingdans %}
                                                <tr>
                                                    <td>{{ dingdan.id }}</td>
                                                    <td>{{ dingdan.ddh }}</td>
                                                    <td>{{ khxq.username }}</td>
                                                    <td>{{ dingdan.ddtime }}</td>
                                                    <td>{{ dingdan.dduser }}</td>
                                                    <td>
                                                        <button type="button" class="btn btn-primary"
                                                                data-toggle="modal"
                                                                data-target="#exampleModalCenter_{{ dingdan.id }}">查看详情
                                                        </button>
                                                        <a href="{% url 'genjinlogs_delete' pk=dingdan.id %}"  class="btn btn-primary">删除订单</a>
                                                    </td>

                                                </tr>
                                                {# 操作按钮模态框#}
                                                <div class="modal fade" id="exampleModalCenter_{{ dingdan.id }}"
                                                     tabindex="-1" role="dialog"
                                                     aria-labelledby="exampleModalCenterTitle"
                                                     aria-hidden="true">
                                                    <div class="modal-dialog modal-dialog-centered" role="document">
                                                        <div class="modal-content">
                                                            <div class="modal-header">
                                                                <h5 class="modal-title"
                                                                    id="exampleModalCenterTitle">{{ khxq.username }}
                                                                    - {{ dingdan.ddh }}</h5>
                                                                <button type="button" class="close" data-dismiss="modal"
                                                                        aria-label="Close">
                                                                    <span aria-hidden="true">&times;</span>
                                                                </button>
                                                            </div>
                                                            <div class="modal-body">






                                                            </div>
                                                            <div class="modal-footer">
                                                                <button type="button" class="btn btn-primary"
                                                                        data-dismiss="modal">关闭
                                                                </button>
                                                                {#        <button type="button" class="btn btn-primary">Save changes</button>#}
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            {% endfor %}
                                        </table>
                                    </div>

                                </div>
                                <div class="tab-pane fade" id="v-pills-messages" role="tabpanel"
                                     aria-labelledby="v-pills-messages-tab">{#客户进班信息#}

                                </div>
                                <div class="tab-pane fade" id="v-pills-settings" role="tabpanel"
                                     aria-labelledby="v-pills-settings-tab">
        <div class="row-lg" >
        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#staticBackdropgjjl">
  添加跟进记录
</button>
                                    <div class="card p-2">
                                        <h2 class="mb-2 p-3">跟进记录</h2>
                                        <div class="card-body" style="max-height: 500px ;overflow-y: auto;">
                                        <ul class="card-body list-group ">
                                            {% for genjinlog in genjinlogs %}
                                                <li class="list-group-item d-flex justify-content-between align-items-center">
                                                    {% if genjinlog.get_genjinleixing_display == '提醒' %}
                                                        <span><i class="icon-clock text-danger"></i>
                                                {{ genjinlog.get_genjinleixing_display }}:</span>

                                                        <p class="w-50">{{ genjinlog.genjintext }}</p>

                                                    {% elif genjinlog.get_genjinleixing_display == '重要' %}

                                                        <span><i class="icon-paper-airplane text-danger"></i>
                                               {{ genjinlog.get_genjinleixing_display }}:</span>
                                                        <p class="w-50">{{ genjinlog.genjintext }}</p>
                                                    {% else %}
                                                        <span><i class="icon-list text-primary icon-paper-airplane"></i>{{ genjinlog.get_genjinleixing_display }}:</span>
                                                        <p class="w-50"> {{ genjinlog.genjintext }}</p>
                                                    {% endif %}

                                                    <span class="float-right"><span
                                                            class="badge badge-primary badge-pill mr-5">{{ genjinlog.genjintime }}</span>
                                            <a class="badge badge-primary badge-pill"
                                               href="{% url 'genjinlogs_delete' pk=genjinlog.id %}">删除</a>
                                            </span>
                                                </li>
                                            {% endfor %}

                                        </ul>
                                         </div>
                                    </div>


        <!-- Modal -->
<div class="modal fade" id="staticBackdropgjjl" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropgjjl" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="staticBackdropLabel">添加跟进记录</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
         <form method="post" action="{% url 'Kehu_detail' pk=object.id %}">
                 {% csrf_token %}
      <div class="modal-body">
        {{ genjinlog_form.as_p }}
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
          <button type="submit" name="form_key" value="genjinlog" class="btn btn-primary">保存</button>
      </div>
          </form>
    </div>
  </div>
</div>












   </div>
                                </div>
                                <div class="tab-pane fade" id="v-pills-xiangqing" role="tabpanel"
                                     aria-labelledby="v-pills-xiangqing-tab">
                                客户当前资料：
                                    <div class="card">
                                        {% for kehuzilao in kehuziliaos %}
<img src="{{ kehuzilao.fujian.url }}" alt="" style="width: 200px;">
        <ul>
             <li>证件号：{{ kehuzilao.hujizhenghao }}</li>
            <li>户籍类型：{{ kehuzilao.get_hujileixing_display }}</li>
            <li>附件：{{ kehuzilao.fujian.url }}</li>
        </ul>
                                {% endfor %}
                                        <div class="card-header">客户资料上传</div>
                                        <div class="card-body">
                                            <!-- 客户资料表单 -->
                                            <form method="post" class="form form-group" action="{% url 'Kehu_detail' pk=object.id %}" enctype="multipart/form-data">
                                                {% csrf_token %}
                                                {{ KeHuzilao_Form.as_p }}
                                                <button type="submit" name="form_key" value="ziliao">保存</button>
                                            </form>
                                        </div>


                                    </div>
                                </div>


                            </div>
                        </div>
                    </div>

                </div>
            </div>

        </div>
    </div>
{% endblock %}
{% block footerjs %}
    <script>
        document.addEventListener("DOMContentLoaded", function () {
            // 获取 URL 中的锚点部分
            var hash = window.location.hash;
            // 检查是否指定了有效的标签页 ID（去掉前面的 # 号）
            if (hash && hash.startsWith("#")) {
                var tabToShow = hash.substring(1); // 去掉 # 号
                $('a[href="#' + tabToShow + '"]').tab('show');
            }

        });
    </script>

{% endblock %}